<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue控制class</title>
  <link rel="stylesheet" href="./css/vue-css.css">
</head>

<body>

  <div id="app">
    <div>
      {{ current }}
      <br>
      {{ menus }}
    </div>

    <!-- 
      vue对class属性的注入是通过元素的classList属性完成的
      注入的信息是一个json
      json的key就是要操作的class名称
      json的值就是一个逻辑表达式
      如果逻辑表达式的值为真，对应的key的class会被添加到元素上
      否则对应的class会被移除
      class注入也是唯一个可以和标准属性同时出现的
    -->

    <div class="menus">
      <span v-for="d in menus" @click="changeMenu(d)" :class="{'active':d.id == current.id}" class="abcd">{{ d.text }}</span>
    </div>

    <hr>

    <div v-if="current.id == 1">
      首页对应的内容
    </div>
    <div v-else-if="current.id == 2">
      作品展示区域
    </div>
    <div v-else>
      关于信息
    </div>





  </div>


  <script src="./js/vue-css.js" type="module"></script>
</body>

</html>